<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./styles/register.css">
</head>

<body>
  <!-- 头部 -->
  <header>
    <div class="center">
      <div class="left">
        <a href="#" style="color: red;">亲，请登录</a>
        <a href="#">免费注册</a>
        <a href="#">手机逛淘宝</a>
        <a href="#">网页无障碍</a>
      </div>
      <div class="right">
        <a href="#">淘宝网首页</a>
        <div class="show1">
          <a href="#">我的淘宝<span class="glyphicon glyphicon-menu-down trigon"></span></a>
          <!-- 下拉菜单隐藏显示 -->
          <div>
            <ul>
              <li>
                <a href="#">已买到的宝贝</a>
              </li>
              <li>
                <a href="#">我的足迹</a>
              </li>
            </ul>
          </div>
        </div>
        <a href="#"><span class="glyphicon glyphicon-shopping-cart" style="color:red"></span>购物车</a>
        <div class="show2">
          <a href="#"><span class="glyphicon glyphicon-star"></span>收藏夹<span
              class="glyphicon glyphicon-menu-down trigon"></span>
          </a>
          <!-- 下拉菜单隐藏显示 -->
          <div>
            <ul>
              <li>
                <a href="#">收藏的宝贝</a>
              </li>
              <li>
                <a href="#">收藏的店铺</a>
              </li>
            </ul>
          </div>
        </div>
        <a href="#">商品分类</a>
        <a href="#">免费开店</a>
      </div>
    </div>
  </header>
  <!-- 主体 -->
  <main>
    <div class="center">
      <div class="top">
        <div class="log">
          <a href="#"><img src="./img/log.png" alt="图片未加载" style="width: 106px;"></a>
        </div>
        <h1>用户注册</h1>
      </div>
      <!-- <div class="form"> -->
      <form action="">
        <div class="box1">
          <label for="inputPhone" class="inputphone">手机号码<span></span></label>
          <select name="">
            <option value="">中国大陆 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; +86</option>
            <option value="">中国香港 +852</option>
            <option value="">中国澳门 +853</option>
            <option value="">中国台湾 +886</option>
            <option value="">韩国 +82</option>
            <option value="">日本 +81</option>
            <option value="">中国香港 +852</option>
            <option value="">中国香港 +852</option>
            <option value="">中国香港 +852</option>
            <option value="">中国香港 +852</option>
            <option value="">中国香港 +852</option>
            <option value="">中国香港 +852</option>
          </select>
          <input type="text" placeholder="请输入你的手机号码" id="phone">
          <span class="phone"></span>
        </div>
        <div class="box2">
          <label for="inputCode" class="inputcode">验证码</label>
          <input type="code" placeholder="请输入验证码">
          <a href="#"><span>获取验证码</span></a>
        </div>
        <div class="box3">
          <button type="submit" class="btn">注册</button>
        </div>
        <div class="box4">
          <label>
            <input type="checkbox">
            <span style="color: gray;">已阅读并同意以下协议</span>
            <a href="#" style="color: red;">淘宝平台服务协议</a>
            <span>、</span>
            <a href="#" style="color: red;">隐私 &nbsp;&nbsp;&nbsp;&nbsp; 权政策</a>
            <span>、</span>
            <a href="#" style="color: red;">法律声明</a>
            <span>、</span>
            <a href="#" style="color: red;">支付宝及客户端服务协议</a>
          </label>
        </div>
        <div class="box5">
          <a href="#">切换成企业账户注册</a>
        </div>
      </form>
      <!-- </div> -->
    </div>
  </main>
  <!-- 脚部 -->
  <footer>
    <div class="center">
        <ul>
          <li><a href="#">阿里巴巴集团</a></li>
          <li><a href="#">阿里巴巴国际站</a></li>
          <li><a href="#">阿里巴巴中国站</a></li>
          <li><a href="#">全球速卖通</a></li>
          <li><a href="#">淘宝网</a></li>
          <li><a href="#">天猫</a></li>
          <li><a href="#">聚划算</a></li>
          <li><a href="#">一淘</a></li>
          <li><a href="#">阿里妈妈</a></li>
          <li><a href="#">阿里云计算</a></li>
          <li><a href="#">云OS</a></li>
          <li><a href="#">万网</a></li>
          <li><a href="#">支付宝</a></li>
        </ul>
      <div class="buttom">
        <div class="top">
          <a href="#">关于淘宝</a>
          <a href="#">合作伙伴</a>
          <a href="#">营销中心</a>
          <a href="#">联系淘宝</a>
          <a href="#">开放平台</a>
          <a href="#">诚征英才</a>
          <a href="#">联系我们</a>
          <a href="#">网站地图</a>
          <a href="#">法律声明及隐私权政策</a>
          <span>&copy; 2022 Taobao.com 版权所有</span>
        </div>
        <div class="under">
          <ul>
            <li>网络文化经营许可证：<a href="">文网文[2010]040号</a></li>
            <li class="text">增值电信业务经营许可证：浙B2-20080224-1</li>
            <li class="text2">信息网络传播视听节目许可证：1109364号</li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>

</html>

<script>
  window.onload = function () {
    let inputs = Array.from(document.querySelectorAll('form>input:not([type=submit])'));
    let submit = document.querySelector('input[type=submit]');

    let regs = [
      
      { name: 'phone', reg: /^(\+86)?1[3-9]\d{9}$/, message: '手机号格式不正确' },
    ];

    inputs.forEach((el, i) => {
      el.oninput = function () {

        if (this.id === 'confirmpwd') {
          let span = document.querySelector('.' + this.id);
          if (this.value === document.querySelector('#password').value) {
            span.innerHTML = '';
            span.style.color = 'green';
            this.setAttribute('data-check', true);
          } else {
            span.innerHTML = regs[i].message;
            span.style.color = 'red';
            this.setAttribute('data-check', false);
          }
          return;
        }

        let res = regs[i].reg.test(this.value);
        let span = document.querySelector('.' + this.id);

        this.setAttribute('data-check', res);
        if (!res) {
          span.innerHTML = regs[i].message;
          span.style.color = 'red';
        } else {
          span.innerHTML = '';
          span.style.color = 'green';
        }
      }
    });


    submit.onclick = function (ev) {
      let ischecked = document.querySelectorAll('[data-check=true]').length === 5;
      if (!ischecked) ev.preventDefault();
    }

  }
</script>